<template>
  <ul class="nav-table">
    <li>
      <svg
        t="1608538492375"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="23575"
        width="24"
        height="24"
      >
        <path
          d="M485.052632 970.105263H53.894737V53.894737h431.157895v296.421052H431.157895V107.789474H107.789474v808.421052h323.368421v-242.526315h53.894737zM538.947368 970.105263h431.157895V53.894737h-431.157895v296.421052h53.894737V107.789474h323.368421v808.421052h-323.368421v-242.526315h-53.894737z"
          fill="#444A5C"
          p-id="23576"
        ></path>
        <path
          d="M485.052632 484.513684L367.023158 366.484211l-38.265263 38.265263L409.061053 485.052632H161.684211v53.894736h247.376842L328.757895 619.250526l38.265263 38.265263L485.052632 539.486316 484.513684 538.947368H485.052632V485.052632h-0.538948zM862.315789 485.052632h-247.376842l80.303158-80.303158-38.265263-38.265263L538.947368 484.513684l0.538948 0.538948H538.947368v53.894736h0.538948l-0.538948 0.538948 118.029474 118.029473 38.265263-38.265263L614.938947 538.947368H862.315789z"
          fill="#444A5C"
          p-id="23577"
        ></path>
      </svg>
      合并单元格
    </li>
    <li>
      <svg
        t="1608538586878"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="23840"
        width="24"
        height="24"
      >
        <path
          d="M576 0h384c35.34336 0 64 28.65664 64 64v896s-28.65664 64-64 64h-384v-64h384v-896h-384.15872M320 448h128v128h-128v128L128 512l192-192v128z m257.92-384H64v896h514.13504l-0.85504 64H64C28.65664 1024 0 995.34336 0 960v-896S28.65664 0 64 0h516.16256M896 512l-192 192v-128h-128v-128h128v-128L896 512z"
          fill=""
          p-id="23841"
        ></path>
      </svg>
      拆分单元格
    </li>
    <li>
      <svg
        t="1608538616746"
        class="icon"
        viewBox="0 0 1378 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="24652"
        width="24"
        height="24"
      >
        <path
          d="M1339.076923 39.384615v945.23077H275.692308V39.384615h1063.384615m0-39.384615H275.692308a39.384615 39.384615 0 0 0-39.384616 39.384615v945.23077a39.384615 39.384615 0 0 0 39.384616 39.384615h1063.384615a39.384615 39.384615 0 0 0 39.384615-39.384615V39.384615a39.384615 39.384615 0 0 0-39.384615-39.384615z"
          fill="#4D4D4D"
          p-id="24653"
        ></path>
        <path
          d="M275.692308 393.846154h1063.384615v39.384615H275.692308zM275.692308 590.769231h1063.384615v39.384615H275.692308zM275.692308 787.692308h1063.384615v39.384615H275.692308zM275.692308 196.923077h1063.384615v39.384615H275.692308z"
          fill="#B3B3B3"
          p-id="24654"
        ></path>
        <path
          d="M551.384615 39.384615v945.23077h-39.384615V39.384615zM827.076923 39.384615v945.23077h-39.384615V39.384615zM1102.769231 39.384615v945.23077h-39.384616V39.384615z"
          fill="#B3B3B3"
          p-id="24655"
        ></path>
        <path
          d="M256 216.615385m19.692308 0l1063.384615 0q19.692308 0 19.692308 19.692307l0 157.538462q0 19.692308-19.692308 19.692308l-1063.384615 0q-19.692308 0-19.692308-19.692308l0-157.538462q0-19.692308 19.692308-19.692307Z"
          fill="#05AFC8"
          p-id="24656"
        ></path>
        <path
          d="M1339.076923 236.307692v157.538462H275.692308V236.307692h1063.384615m0-39.384615H275.692308a39.384615 39.384615 0 0 0-39.384616 39.384615v157.538462a39.384615 39.384615 0 0 0 39.384616 39.384615h1063.384615a39.384615 39.384615 0 0 0 39.384615-39.384615V236.307692a39.384615 39.384615 0 0 0-39.384615-39.384615z"
          fill="#4D4D4D"
          p-id="24657"
        ></path>
        <path
          d="M196.923077 315.076923L78.769231 196.923077v236.307692l118.153846-118.153846z"
          fill="#05AFC8"
          p-id="24658"
        ></path>
        <path
          d="M78.769231 275.692308m0 1.575384l0 75.618462q0 1.575385-1.575385 1.575384l-75.618461 0q-1.575385 0-1.575385-1.575384l0-75.618462q0-1.575385 1.575385-1.575384l75.618461 0q1.575385 0 1.575385 1.575384Z"
          fill="#05AFC8"
          p-id="24659"
        ></path>
      </svg>
      插入行
    </li>
    <li>
      <svg
        t="1608538630989"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="25003"
        width="24"
        height="24"
      >
        <path
          d="M944 224v768H80V224h864m0-32H80a32 32 0 0 0-32 32v768a32 32 0 0 0 32 32h864a32 32 0 0 0 32-32V224a32 32 0 0 0-32-32z"
          fill="#4D4D4D"
          p-id="25004"
        ></path>
        <path
          d="M80 512h864v32H80zM80 672h864v32H80zM80 832h864v32H80zM80 352h864v32H80z"
          fill="#B3B3B3"
          p-id="25005"
        ></path>
        <path
          d="M304 224v768H272V224zM528 224v768h-32V224zM752 224v768h-32V224z"
          fill="#B3B3B3"
          p-id="25006"
        ></path>
        <path d="M400 160l96-96H304l96 96z" fill="#05AFC8" p-id="25007"></path>
        <path
          d="M432 64m-1.28 0l-61.44 0q-1.28 0-1.28-1.28l0-61.44q0-1.28 1.28-1.28l61.44 0q1.28 0 1.28 1.28l0 61.44q0 1.28-1.28 1.28Z"
          fill="#05AFC8"
          p-id="25008"
        ></path>
        <path
          d="M288 208m16 0l192 0q16 0 16 16l0 768q0 16-16 16l-192 0q-16 0-16-16l0-768q0-16 16-16Z"
          fill="#05AFC8"
          p-id="25009"
        ></path>
        <path
          d="M496 224v768H304V224h192m0-32H304a32 32 0 0 0-32 32v768a32 32 0 0 0 32 32h192a32 32 0 0 0 32-32V224a32 32 0 0 0-32-32z"
          fill="#4D4D4D"
          p-id="25010"
        ></path>
      </svg>
      插入列
    </li>
    <li>
      <svg
        t="1608538663137"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="25534"
        width="24"
        height="24"
      >
        <path
          d="M960.605 932.345v-240.231c0.045-7.2-2.723-14.445-8.213-19.98-11.115-11.047-29.002-11.047-40.071 0-5.535 5.535-8.303 12.757-8.303 19.98v171.923l-351.99-352.035 351.99-352.013v171.855c0 7.245 2.767 14.49 8.303 20.002 11.070 11.070 28.957 11.070 40.071 0 5.49-5.511 8.257-12.78 8.213-20.002v-240.187c0.045-7.223-2.723-14.468-8.213-20.003-5.58-5.511-12.803-8.279-20.025-8.302h-240.233c-7.222 0-14.467 2.79-19.98 8.302-11.115 11.049-11.115 28.957 0 40.050 5.511 5.535 12.735 8.302 19.98 8.279h171.9l-352.013 352.013-352.012-352.035h171.855c7.268 0.022 14.49-2.745 20.025-8.279 11.070-11.047 11.070-29.002 0-40.050-5.49-5.511-12.758-8.279-20.025-8.303h-240.187c-7.268 0-14.513 2.79-20.025 8.303-5.513 5.558-8.279 12.803-8.279 20.048v240.165c0 7.245 2.79 14.512 8.279 20.002 11.070 11.070 28.98 11.070 40.028 0 5.513-5.511 8.279-12.713 8.279-20.002v-171.855l352.058 352.012-352.035 352.035v-171.922c0-7.2-2.745-14.445-8.279-19.98-11.070-11.047-29.002-11.047-40.028 0-5.558 5.535-8.279 12.757-8.279 19.98v240.231c0 7.223 2.79 14.468 8.279 20.048 5.535 5.468 12.757 8.279 20.025 8.279h240.188c7.268 0 14.49-2.745 20.025-8.279 11.070-11.047 11.070-29.002 0-40.050-5.535-5.535-12.78-8.257-20.025-8.257h-171.877l352.012-352.035 352.013 352.035h-171.9c-7.222 0-14.467 2.768-19.98 8.257-11.115 11.049-11.115 29.002 0 40.050 5.511 5.468 12.735 8.279 19.98 8.279h240.255c7.2 0 14.445-2.813 20.025-8.279 5.467-5.602 8.19-12.825 8.19-20.048z"
          p-id="25535"
        ></path>
      </svg>
      自适应宽度
    </li>
    <li>
      <svg
        t="1608538691587"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="26986"
        width="24"
        height="24"
      >
        <path
          d="M800.256 741.888l47.616-47.616a31.744 31.744 0 0 1 45.056 45.056l-102.4 102.4a31.744 31.744 0 0 1-54.272-22.528V204.8a32.256 32.256 0 0 1 64 0zM153.6 237.056a32.256 32.256 0 0 1 0-64h460.8a32.256 32.256 0 0 1 0 64z m0 307.2a32.256 32.256 0 0 1 0-64h460.8a32.256 32.256 0 0 1 0 64z m0 307.2a32.256 32.256 0 0 1 0-64h460.8a32.256 32.256 0 0 1 0 64z"
          p-id="26987"
        ></path>
      </svg>
      生成排序值
    </li>
    <div>
      <el-input-number
        v-model="num"
        controls-position="right"
        @change="handleChange"
        :min="1"
        :max="10"
        size="mini"
      ></el-input-number>
      高度
    </div>
    <div>
      <el-input-number
        v-model="num"
        controls-position="right"
        @change="handleChange"
        :min="1"
        :max="10"
        size="mini"
      ></el-input-number>
      宽度
    </div>
  </ul>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const num = ref(1);
    function handleChange(value) {
      num.value = value;
    }
    return {
      num,
      handleChange,
    };
  },
};
</script>

<style lang="scss" scoped>
.nav-table {
  display: flex;
  li {
    margin-left: 24px;
    padding: 4px;
    &:hover {
      transition: 0.3s all;
      background-color: #eaecf0;
    }
  }
  > div {
    margin-left: 24px;
    .el-input-number--mini {
      width: 90px;
    }
  }
  svg {
    vertical-align: middle;
  }
}

</style>
